<!--基础饼图-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import BasePieChart from './BasePieChart'

  const _this = {
    name: 'BasePieChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          tooltip: {
            show: true,
            trigger: 'item',
            triggerOn: 'mousemove',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(50,50,50,0.7)',
            padding: 5,
            borderWidth: 0,
            borderColor: '#333',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          legend: {
            show: false,
            position: 'top-center',
            orient: 'horizontal',
            textStyle: {
              color: 'rgb(144, 160, 174)',
              fontSize: 12
            },
            icon: 'roundRect'
          },

          pie: {
            radius: ['0', '80%'],
            center: ['50%', '50%'],
            roseType: '',
            color: [],
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0,
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            label: {
              show: true,
              position: 'inside',
              formatter: '{c}',
              color: '#fff',
              autoColor: false,
              fontSize: 12,
              backgroundColor: '',
              borderColor: '',
              borderWidth: 0,
              borderRadius: 0,
              padding: 0
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 15,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            }
          },

          series: [
            BasePieChart.buildSeriesObj('防城港', '#ff9800')
          ]
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'name': '南宁',
            'value': 100
          },
          {
            'name': '柳州',
            'value': 130
          },
          {
            'name': '桂林',
            'value': 200
          },
          {
            'name': '崇左',
            'value': 334
          },
          {
            'name': '北海',
            'value': 390
          },
          {
            'name': '防城港',
            'value': 330
          },
          {
            'name': '玉林',
            'value': 220
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {
        carouselTimer: null
      }
    },
    mounted() {

      this.init();

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: this.component.compConfigData.chartOption.tooltip.show,
            trigger: this.component.compConfigData.chartOption.tooltip.trigger,
            triggerOn: this.component.compConfigData.chartOption.tooltip.triggerOn,
            axisPointer: {
              type: this.component.compConfigData.chartOption.tooltip.axisPointer.type
            },
            backgroundColor: this.component.compConfigData.chartOption.tooltip.backgroundColor,
            padding: this.component.compConfigData.chartOption.tooltip.padding,
            borderWidth: this.component.compConfigData.chartOption.tooltip.borderWidth,
            borderColor: this.component.compConfigData.chartOption.tooltip.borderColor,
            textStyle: {
              color: this.component.compConfigData.chartOption.tooltip.textStyle.color,
              fontSize: this.component.compConfigData.chartOption.tooltip.textStyle.fontSize
            }
          },
          legend: {
            show: this.component.compConfigData.chartOption.legend.show,
            left: this.$PnDesigner.buildChartLegendPosition(this.component.compConfigData.chartOption.legend.position).left,
            bottom: this.$PnDesigner.buildChartLegendPosition(this.component.compConfigData.chartOption.legend.position).bottom,
            orient: this.component.compConfigData.chartOption.legend.orient,
            textStyle: {
              color: this.component.compConfigData.chartOption.legend.textStyle.color,
              fontSize: this.component.compConfigData.chartOption.legend.textStyle.fontSize
            },
            icon: this.component.compConfigData.chartOption.legend.icon,
            data: []
          },
          series : [
            {
              name: '',
              type: 'pie',
              radius : [this.component.compConfigData.chartOption.pie.radius[0], this.component.compConfigData.chartOption.pie.radius[1]],
              center: ['50%', '50%'],
              roseType: this.component.compConfigData.chartOption.pie.roseType,
              color: this.component.compConfigData.chartOption.pie.color,
              data:[],
              itemStyle: {
                borderColor: this.component.compConfigData.chartOption.pie.itemStyle.borderColor,
                borderWidth: this.component.compConfigData.chartOption.pie.itemStyle.borderWidth,
                shadowBlur: this.component.compConfigData.chartOption.pie.itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.pie.itemStyle.shadowColor
              },
              label: {
                show: this.component.compConfigData.chartOption.pie.label.show,
                position: this.component.compConfigData.chartOption.pie.label.position,
                formatter: this.component.compConfigData.chartOption.pie.label.formatter,
                color: this.component.compConfigData.chartOption.pie.label.autoColor ? 'auto' : this.component.compConfigData.chartOption.pie.label.color,
                fontSize: this.component.compConfigData.chartOption.pie.label.fontSize,
                backgroundColor: this.component.compConfigData.chartOption.pie.label.backgroundColor,
                borderColor: this.component.compConfigData.chartOption.pie.label.borderColor,
                borderWidth: this.component.compConfigData.chartOption.pie.label.borderWidth,
                borderRadius: this.component.compConfigData.chartOption.pie.label.borderRadius,
                padding: this.component.compConfigData.chartOption.pie.label.padding
              },
              labelLine: {
                show: this.component.compConfigData.chartOption.pie.labelLine.show,
                length: this.component.compConfigData.chartOption.pie.labelLine.length,
                length2: this.component.compConfigData.chartOption.pie.labelLine.length2,
                lineStyle: {
                  width: this.component.compConfigData.chartOption.pie.labelLine.lineStyle.width,
                  type: this.component.compConfigData.chartOption.pie.labelLine.lineStyle.type
                }
              }
            },
          ]
        };

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach(item => {
          option.legend.data.push(item.name)
        });

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach((item, index) => {
          let obj = Object.assign({}, item)
          this.component.compConfigData.chartOption.series.forEach(s => {
            if (item.name == s.name) {
              obj.selected = s.selected;
              obj.itemStyle = s.itemStyle
            }
          });
          option.series[0].data.push(obj);
        });

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {

    }
  };

  export default _this
</script>

<style scoped>

</style>
